﻿@model dynamic

@{
    ViewBag.Title = "Fill in your data";
    Layout = "../_Layout.cshtml";
}

@section scripts
{
    <script type="text/javascript">
        require(['home']);
    </script>
}

<div id="ko-content">
    <h1>§ynx</h1>
    <div id="resolveDialog" title="Conflict!" style="display: none;">
        <p>
            While changing the field somebody else edited the same field.<br />
            <br />
            Choose the right value for this field:
        </p>
    </div>
    <div id="chat" title="Chat" style="display: none">
        <div id="messageContainer">
            <ul id="chatmessages">
                <!-- ko foreach: $root.chatList() -->
                    <li data-bind="text: $data"></li>
                <!-- /ko -->
            </ul>
        </div>
        <div id="inputBar">
            <input id="message" type="text" />
            <span id="buttonSpan">
                <button id="send">Send</button></span>
        </div>
    </div>
    
    <h2 id="connection"></h2>
    
    <div style="text-align: center"><button id="openChat">Chat</button></div>
    <br/>
    <fieldset>
        <legend>Fill in your data:</legend>
        <ul>
            <li>
                <label for="Name" class="inputLabel">Name:</label>
                <input id="Name" type="text" data-bind="synxvalue: {id: 'Name', data:$root.Name}, synxhover: {id:'Name'}" />
            </li>
            <li>
                <label for="Surname" class="inputLabel">Surname:</label>
                <input id="Surname" type="text" data-bind="synxvalue:{id: 'Surname', data: $root.Surname}, synxhover: {id:'Surname'}" />
            </li>
            <li>
                <label for="Street" class="inputLabel">Street:</label>
                <input id="Street" type="text" data-bind="synxvalue:{id: 'Street', data: $root.Street}, synxhover: {id:'Street'}" />
            </li>
            <li>
                <label for="Housenumber" class="inputLabel">Housenumber:</label>
                <input id="Housenumber" type="text" data-bind="synxvalue:{id: 'Housenumber', data: $root.Housenumber}, synxhover: {id:'Housenumber'}" />
            </li>
            <li>
                <label for="PostalCode" class="inputLabel">Postal code:</label>
                <input id="PostalCode" type="text" data-bind="synxvalue:{id: 'PostalCode', data: $root.PostalCode}, synxhover: {id:'PostalCode'}" />
            </li>
            <li>
                <label for="City" class="inputLabel">City:</label>
                <input id="City" type="text" data-bind="synxrealtime: {id: 'City',data: $root.City}, synxhover: {id:'City'}" />
            </li>
        </ul>
    </fieldset>

    <br />
    <br />
    <fieldset>
        <legend>Overview</legend>
        <ul>
            <li>
                <label for="txtName">Name:</label>
                <span id="txtName" data-bind="text: $root.Name" />
            </li>
            <li>
                <label for="txtSurname">Surname:</label>
                <span id="txtSurname" data-bind="text: $root.Achternaam" />
            </li>
            <li>
                <label for="Street">Street:</label>
                <span id="txtStraat" data-bind="text: $root.Straat" />
            </li>
            <li>
                <label for="txtHousenumber">Housenumber:</label>
                <span id="txtHousenumber" data-bind="text: $root.Housenumber" />
            </li>
            <li>
                <label for="txtPostalCode">Postal code:</label>
                <span id="txtPostalCode" data-bind="text: $root.PostalCode" />
            </li>
            <li>
                <label for="City">Woonplaats:</label>
                <span id="txtCity" data-bind="text: $root.City" />
            </li>
        </ul>
    </fieldset>
    <br />
    <br />

    <fieldset>
        <legend>Errors</legend>
        <ol id="messages"></ol>
    </fieldset>
</div>
